<template>
	<div>
		<!-- 使用 mui 的顶部滑动菜单 。mui-fullscreen：这个类会是滑动菜单占满全屏，需要去掉-->
		<!-- 此时的顶部菜单是无法滑动的，是因为 mui 的组件需要初始化，需要时相关的 js 文件 -->
		<div id="slider" class="mui-slider ">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a v-bind:class="['mui-control-item',item.id==0?'mui-active':''] " 
						v-for="item in cates" :key="item.id"
						@click="getPhotoList(item.id)">
						{{item.title}}
					</a>
				</div>
			</div>
		</div>
		<div class="photo-list">
			<ul>
				<router-link v-for="item in photolist" :key="item.id" :to="'/home/photoinfo/'+item.cateid" tag="li">
					<img v-lazy="item.url"/>
					<div class="info">
						<h3 class="info-title">{{item.title}}</h3>
						<div class="info-abs">{{item.abs}}</div>
					</div>
				</router-link>
			</ul>
		</div>
	</div>
</template>

<script>
	import mui from '../../lib/mui/js/mui.min.js'
	/* 
	 mui.min.js:946 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
	import mui 后，报错了，这是因为webpack打包的时候开启了严格模式，不严谨的js代码将不被允许
	解决方案：移除 webpack 的严格模式
	 */
	import {Toast} from "mint-ui"
	export default {
		data() {
			return {
				cates:[],
				photolist:[]
			}
		},
		created() {
			this.getAllCategory();
			this.getPhotoList(0);
		},
		mounted(){ 
			//生命周期钩子：组件DOM被渲染好并放到页面中
			/* 
			 如果要操作元素，最好放在mounted中，因为这时候DOM是最新的
			 */
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
		},
		methods: {
			getAllCategory(){
				this.$http.get('../../data/category.json').then(function(result){
					if(result.body.length>0){
						this.cates = result.body;
					}
				},function(err){
					Toast("获取分类列表失败")
				})
			},
			getPhotoList(cateid){
				this.$http.get('../../data/photolist.json').then(result => {
					if(result.body.length>0){
						if(cateid!=0){
							this.photolist = result.body.filter(item => {return item.cateid==cateid})
						}else{
							this.photolist = result.body;
						}
					}
				},err => {
					Toast("获取图片列表失败")
				})
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	*{
		touch-action: pan-y;
	}
	.photo-list{
		ul{
			padding: 0px 10px;
			margin-bottom: 0px;
			li{
				list-style: none;
				margin: 10px auto;
				background-color: #ccc;
				text-align: center;
				box-shadow: 0 0 9px #999;
				position: relative;
				img{
					width: 100%;
					vertical-align: middle;
				}
				img[lazy=loading]{
					width: 40px;
					height: 300px;
					margin: auto;
				}
				.info{
					text-align: left;
					padding:5px;
					padding-bottom:10px; 
					color: white;
					position: absolute;
					bottom: 0px;
					background-color: rgba(0,0,0,0.4);
					width: 100%;
					max-height: 80px;
					.info-title{
						font-size: 15px;
					}
					.info-abs{
						font-size: 14px;
					}
				}
			}
		}
	}
</style>
